<template>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="5" class="left">
        <div class="left-header" >
          
          <el-dropdown trigger="click" @command="fawenCommond" style="margin-right:15px">
            <!-- <el-button  size="small" type="warning">
              发文拟稿<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button> -->
            <span class="btn" style="margin-left: 15px; ">
                发文拟稿
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">政府办公厅发文稿纸</el-dropdown-item>
              <el-dropdown-item command="b">工作签报</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>  

        <!--  @click="toRedict" -->
          <el-dropdown trigger="click" @command="shouWenCommond">
            <span class="btn" style="background-color:rgb(45,183,245)">
                收文登记
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">上级单位来文</el-dropdown-item>
              <el-dropdown-item command="b">行政收文</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>  


        </div>
        <div class="left-middle">
          <div class="left-middle-header">
            <span></span>
            按公文种类分类（{{docTypeCount}}）
          </div>
          <div class="left-middle-categorys" v-loading="load2.list">
            <el-row :gutter="20">
              <el-col :span="12" v-for="docType in docTypes" :key="docType.typeId">
                <div class="left-middle-category" @click="gotoDetail(docType)">
                  <span>{{docType.typeName}}</span>
                  <span>{{docType.docCount}}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="left-tail">
          <div class="left-tail-header">
            <span></span>
            按主题分类（{{docTopicCount}}）
          </div>
          <div v-loading="load3.list">
            <div class="left-tail-theme" @click="gotoDetail(docTopic)" v-for="(docTopic,i) in docTopics" :key="docTopic.topicId">
              <span :class="[i <3 ? 'span1':'span1-1' ]">{{i+1}}</span>
              <span class="span2">{{docTopic.topicName}}</span>
              <span class="span3">{{docTopic.docCount}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="19" class="right">
        <div class="right-search">
          <el-input v-model="key" class="input" placeholder="请输入内容"></el-input>
          <el-button type="primary" @click="searchDocArchives">搜索</el-button>
          <span @click="isHidden = !isHidden" style="margin-left:5px;s">高级搜索</span>
        </div>

        <div class="advanced-query" v-if="isHidden">
          <div class="advanced-query-form">
            <div class="input-form">
              <div class="input-form-label">公文标题:</div>
              <div class="input-form-input">
                <el-input v-model="docType" placeholder="请输入内容" class="input-form-in"></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">公文种类:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spantype==1}" @click="openType(1)">全部</span>
                <span :class="{'spanbg':spantype==2}" @click="openType(2)">指定公文种类</span>
                <el-input
                  disabled
                  v-model="typeName"
                  placeholder="请输入内容"
                  v-show="spantype == 2"
                  suffix-icon="el-icon-search"
                  class="input-form-in"
                ></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">主题分类:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spancategory==1}" @click="openTopic(1)">全部</span>
                <span :class="{'spanbg':spancategory==2}" @click="openTopic(2)">指定主题分类</span>
                <el-input
                  disabled
                  v-model="topicName"
                  placeholder="请输入内容"
                  v-show="spancategory == 2"
                  suffix-icon="el-icon-search"
                  class="input-form-in"
                ></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">发文字号:</div>
              <div class="input-form-input">
                <el-input v-model="wordNum" placeholder="请输入内容" class="input-form-in"></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">成文日期:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spantime==1}" @click="clickSpanTime(1)">全部</span>
                <span :class="{'spanbg':spantime==2}" @click="clickSpanTime(2)">今天</span>
                <span :class="{'spanbg':spantime==3}" @click="clickSpanTime(3)">本周</span>
                <span :class="{'spanbg':spantime==4}" @click="clickSpanTime(4)">本月</span>
                <span :class="{'spanbg':spantime==5}" @click="clickSpanTime(5)">上个月</span>
                <span :class="{'spanbg':spantime==6}" @click="clickSpanTime(6)">本季</span>
                <span :class="{'spanbg':spantime==7}" @click="clickSpanTime(7)">本年</span>
                <span :class="{'spanbg':spantime==8}" @click="clickSpanTime(8)">上一年</span>

                <span :class="{'spanbg':spantime==9}" @click="clickSpanTime(9)">指定日期范围</span>
                <el-date-picker
                  class="input-form-in"
                  v-show="spantime == 9"
                  v-model="selectTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">阅读状态:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spanstatus==1}" @click="spanstatus = 1">全部</span>
                <span :class="{'spanbg':spanstatus==2}" @click="spanstatus = 2">已读</span>
                <span :class="{'spanbg':spanstatus==3}" @click="spanstatus = 3">未读</span>
              </div>
            </div>
          </div>
          <div class="advanced-query-tail">
            <el-button type="primary" @click="searchDocArchives">搜索</el-button>
            <el-button  @click="reset">重置</el-button>
            <el-button @click="cancel">取消</el-button>
          </div>
        </div>
        <div class="right-archives">
          <div class="right-archives-header">
            <span><i class="el-icon-s-cooperation" style="color:rgb(246, 109, 85);font-size:20px;margin-right:5px"></i>公文库</span>
            <span>
              <router-link to="/mdp/arc/doc/selectDocument">更多</router-link>
            </span>
          </div>
          <div class="right-archives-content" v-loading="load.list">
            <el-row :gutter="20" style>
              <el-col
                :span="11"
                class="right-archives-content-col"
                v-for="archive in archives"
                :key="archive.docId"
              >
                <p>
                  <a @click="gotoDetail(archive)">{{archive.docTitle}}</a>
                </p>
                <div class="right-archives-content-time">{{archive.writtenDate}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right-tail">
          <div class="right-tail-header">
            <span><i class="el-icon-s-claim" style="color:rgb(246, 109, 85);font-size:20px;margin-right:5px"></i>待办公文</span>
            <span>更多</span>
          </div>
          <div class="right-tail-content">
            <div class="right-tail-content-top">
              <span :class="{'spanline':spanline==1}" @click="spanline=1">待办发文(0)</span>
              <span :class="{'spanline':spanline==2}" @click="spanline=2">待办收文(0)</span>
              <span :class="{'spanline':spanline==3}" @click="spanline=3">待办签报(0)</span>
            </div>
            <div class="right-tail-content-lists">
              <div class="right-tail-content-list">
                <div class="listbtn">
                  <button>未设置</button>
                </div>
                <div class="right-tail-content-text">
                  <p>
                    <a href>上级单位来文-杨文元-2020-04-20</a>
                  </p>
                  <div class="right-tail-content-text-time">杨文元 2020-04-20 17:10:17</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="公文种类分类" :visible.sync="typeVisible" width="50%">
      <el-table
        :data="dialogDocTypes"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        v-loading="load.list"
        @row-click="clickDocTypeRow"
      >
        <el-table-column prop="typeName" label="名称" sortable width="180"></el-table-column>
        <el-table-column prop="typeRemark" label="描述"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleTypeSizeChange"
        @current-change="handleTypeCurrentChange"
        :current-page="typePageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100,500]"
        :page-size="typePageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="typePageInfo.total"
      ></el-pagination>
    </el-dialog>
    <el-dialog title="公文主题分类" :visible.sync="topicVisible" width="50%">
      <el-table
        :data="dialogDocTopics"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        v-loading="load.list"
        @row-click="clickDocTopicRow"
      >
        <el-table-column prop="topicName" label="名称" sortable width="180"></el-table-column>
        <el-table-column prop="topicRemark" label="描述"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleTopicSizeChange"
        @current-change="handleTopicCurrentChange"
        :current-page="topicPageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100,500]"
        :page-size="topicPageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="topicPageInfo.total"
      ></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import { docTypelist,listDocType } from "@/api/mdp/arc/doc/docType";
import { docTopicList,listDocTopic } from "@/api/mdp/arc/doc/docTopic";
import { selectEightDocArchive } from "@/api/mdp/arc/doc/docArchive";
import { mapGetters } from "vuex";
import {
  getCurrentDate,
  getCurrentWeek,
  getCurrentMonth,
  getPreviousMonth,
  getCurrentSeason,
  getCurrentYear,
  getPreviousYear
} from "./getTime";  //获取各个时间   
export default {
  computed: {
    ...mapGetters(["userInfo"])
  },
  data() {
    return {
      spanline: 1, // 1-待办发文 2-待办收文 3-待办签报
      isHidden: false,
      spantype: 1, //公文种类
      spancategory: 1, //主题分类
      spantime: 1, //成文日期
      spanstatus: 1, //阅读状态
      key: "", //搜索的关键字
      docType: "",  
      typeName: "",
      topicName: "",
      wordNum: "",
      startTime: "",
      selectTime: "", //时间选择器选择的时间
      endTime: "",
      //种类分类分页数据
      typePageInfo: {
        //分页数据
        total: 0, //服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
        pageSize: 10, //每页数据
        count: false, //是否需要重新计算总记录数
        pageNum: 1, //当前页码、从1开始计算
        orderFields: [], //排序列 如 ['sex','student_id']，必须为数据库字段
        orderDirs: [] //升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
      },
      //主题分类分页数据
      topicPageInfo: {
        //分页数据
        total: 0, //服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
        pageSize: 10, //每页数据
        count: false, //是否需要重新计算总记录数
        pageNum: 1, //当前页码、从1开始计算
        orderFields: [], //排序列 如 ['sex','student_id']，必须为数据库字段
        orderDirs: [] //升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
      },
      load: { list: false, edit: false, del: false, add: false }, //查询中...
      load2: { list: false, edit: false, del: false, add: false }, //查询中...
      load3: { list: false, edit: false, del: false, add: false }, //查询中...
      typeVisible: false,
      topicVisible: false,
      docTypes: [], //公文种类分类
      docTopics: [], //公文主题分类
      dialogDocTypes: [], //弹出框公文种类分类
      dialogDocTopics: [], //弹出框公文主题分类
      docTypeCount: 0, //公文种类分类总条数
      docTopicCount: 0, //公文种类分类总条数
      archives: [] //公文库
    };
  },
  created() {
    this.getListDocType();
    this.getListDocTopic();
    this.getListArchives();
  },
  methods: {
    fawenCommond(commond) {
      if(commond === 'a') {
        this.$router.push({name:'政府办公厅发文'});
        // window.open(newUrl.href, "_blank");
      }else {
        let newUrl = this.$router.resolve({
          name: "工作签报"
        });
         this.$router.push({name:'工作签报'});
        // window.open(newUrl.href, "_blank");
      }
    },

    shouWenCommond(commond) {
      if(commond === 'a') {
        let newUrl = this.$router.resolve({
          name: "上级单位来文"
        });
        this.$router.push({name:'上级单位来文'});
        // window.open(newUrl.href, "_blank");
      }else {
        let newUrl = this.$router.resolve({
          name: "行政收文"
        });
        this.$router.push({name:'行政收文'});
        // window.open(newUrl.href, "_blank");
      }
    },



    //查询公文种类分类
    getListDocType() {
      let params = {
        branchId: this.userInfo.branchId
      };
      this.load2.list = true;
      docTypelist(params).then(res => {
        var tips = res.data.tips;
        if (tips.isOk) {
          this.docTypes = res.data.data;
           //计算个数
          let count = 0;
          res.data.data.forEach(param => {
              count += param.docCount;
          });
          this.docTypeCount = count;

        } else {
          this.$message({ message: tips.msg, type: "error" });
        }
        this.load2.list = false;
      });
    },
    //查询公文主题分类
    getListDocTopic() {
      let params = {
        branchId: this.userInfo.branchId
      };
      this.load3.list = true;
      docTopicList(params).then(res => {
        var tips = res.data.tips;
        if (tips.isOk) {
          this.docTopics = res.data.data;
          //计算个数
          let count = 0;
          res.data.data.forEach(param => {
              count += param.docCount;
          });
          this.docTopicCount = count;
        } else {
          this.$message({ message: tips.msg, type: "error" });
        }
        this.load3.list = false;
      });
    },
    //查询最新八条公文
    getListArchives() {
      let params = {
        branchId: this.userInfo.branchId
      };
      this.load.list = true;
      selectEightDocArchive(params).then(res => {
        var tips = res.data.tips;
        if (tips.isOk) {
          this.archives = res.data.data;
        } else {
          this.$message({ message: tips.msg, type: "error" });
        }
        this.load.list = false;
      });
    },
    //点击搜索跳转到公文库界面，并传递搜索条件
    searchDocArchives() {
      this.$router.push({
        path: "/mdp/arc/doc/selectDocument", //要跳转的下一个界面
        query: {
          key: this.key,
          docTitle: this.docType,
          docType: this.typeName,
          topicName: this.topicName,
          startTime: this.startTime,
          endTime: this.endTime,
          wordNum: this.wordNum
        }
      });
    },
    //打开种类分类弹框
    openType(type) {
      this.spantype = type;
      if (type == 2) {
        this.typeVisible = true;
        this.getDocTypes();
      } else {
        this.typeName = "";
      }
    },
    //打开主题分类弹框
    openTopic(type) {
      this.spancategory = type;
      if (type == 2) {
        this.topicVisible = true;
        this.getDocTopic();
      } else {
        this.topicName = "";
      }
    },
    //分页查种类分类
    getDocTypes() {
      let params = {
        pageSize: this.typePageInfo.pageSize,
        pageNum: this.typePageInfo.pageNum,
        total: this.typePageInfo.total,
        count: this.typePageInfo.count,
        branchId: this.userInfo.branchId
      };
      this.load.list = true;
      listDocType(params)
        .then(res => {
          var tips = res.data.tips;
          if (tips.isOk) {
            this.typePageInfo.total = res.data.total;
            this.typePageInfo.count = false;
            this.dialogDocTypes = res.data.data;
          } else {
            this.$message({ message: tips.msg, type: "error" });
          }
          this.load.list = false;
        })
        .catch(err => (this.load.list = false));
    },
    handleTypeSizeChange(pageSize) {
      this.typePageInfo.pageSize = pageSize;
      this.getDocTypes();
    },
    handleTypeCurrentChange(pageNum) {
      this.typePageInfo.pageNum = pageNum;
      this.getDocTypes();
    },
    //选中一行种类分类
    clickDocTypeRow(row) {
      console.log(JSON.stringify(row));
      this.typeName = row.typeName;
      this.typeVisible = false;
    },
    //分页查主题分类
    getDocTopic() {
      let params = {
        pageSize: this.topicPageInfo.pageSize,
        pageNum: this.topicPageInfo.pageNum,
        total: this.topicPageInfo.total,
        count: this.topicPageInfo.count,
        branchId: this.userInfo.branchId
      };
      this.load.list = true;
      listDocTopic(params)
        .then(res => {
          var tips = res.data.tips;
          if (tips.isOk) {
            this.topicPageInfo.total = res.data.total;
            this.topicPageInfo.count = false;
            this.dialogDocTopics = res.data.data;
          } else {
            this.$message({ message: tips.msg, type: "error" });
          }
          this.load.list = false;
        })
        .catch(err => (this.load.list = false));
    },
    handleTopicSizeChange(pageSize) {
      this.topicPageInfo.pageSize = pageSize;
      this.getDocTopic();
    },
    handleTopicCurrentChange(pageNum) {
      this.topicPageInfo.pageNum = pageNum;
      this.getDocTopic();
    },
    //选中一行种类分类
    clickDocTopicRow(row) {
      this.topicName = row.topicName;
      this.topicVisible = false;
    },
    //重置
    reset() {
      this.docType = this.typeName = this.topicName = this.wordNum = this.startTime = this.selectTime = this.endTime =
        "";
    },
    //取消
    cancel() {
      this.docType = this.typeName = this.topicName = this.wordNum = this.startTime = this.selectTime = this.endTime =
        "";
      this.isHidden = false;
    },
    //选择时间
    clickSpanTime(index) {
      if (index == 1) {
        this.spantime = 1;
        this.startTime = this.endTime = "";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 2) {
        this.spantime = 2;
        var today = new Date();
        var datetime =
          today.getFullYear() +
          "-" +
          (today.getMonth() + 1) +
          "-" +
          today.getDate();
        this.startTime = datetime + " 00:00:00";
        this.endTime = datetime + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 3) {
        this.spantime = 3;
        var dateTime = getCurrentWeek();
        this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 4) {
        this.spantime = 4;
        var dateTime = getCurrentMonth();
         this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 5) {
        this.spantime = 5;
        var dateTime = getPreviousMonth();
         this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 6) {
        this.spantime = 6;
        var dateTime = getCurrentSeason();
         this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 7) {
        this.spantime = 7;
        var dateTime = getCurrentYear();
         this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 8) {
        this.spantime = 8;
        var dateTime = getPreviousYear();
         this.startTime = dateTime[0] + " 00:00:00";
        this.endTime = dateTime[1] + " 23:59:59";
        console.log(this.startTime);
        console.log(this.endTime);
      } else if (index == 9) {
        this.spantime = 9;
        if (this.selectTime.length > 0) {
          this.startTime =
            this.selectTime[0].getFullYear() +
            "-" +
            (this.selectTime[0].getMonth() + 1) +
            "-" +
            this.selectTime[0].getDate() +
            " 00:00:00";
          console.log(this.startTime);
          this.endTime =
            this.selectTime[1].getFullYear() +
            "-" +
            (this.selectTime[1].getMonth() + 1) +
            "-" +
            this.selectTime[1].getDate() +
            " 23:59:59";
          console.log(this.endTime);
        }
      }
    },


      //公文库页面跳转
      gotoDetail(data) {
        console.log(data, "gotoDetail");
        this.$router.push({
            path: 'selectDocument',
            query: {
              docId: data.docId,
              docType: data.typeId,
              topicId: data.topicId
            }
        })
      }



  }
};
</script>
<style lang="scss" scoped>
* {
  font-size: 12px;
  font-family: "微软雅黑";
}

.btn {
    width: 100px; 
    background: rgb(246,109,85);
    color: white;
    display: block;
    text-align: center; 
    border-radius: 5% 5% 5% 5%;
    cursor: pointer;
}

.left {
  padding: 20px !important;
  border-right: 1px solid #eaeaea;
  .left-header {
    display: flex;
    justify-content: center;
  }
  .left-middle {
    .left-middle-header {
      height: 32px;
      padding-left: 0;
      color: #333;
      letter-spacing: -0.08px;
      line-height: 18px;
      font-weight: 700;
      vertical-align: middle;
      display: table-cell;
      span {
        border-left: 3px solid #0984e3;
        margin-right: 15px;
      }
    }
    .left-middle-categorys {
      padding-left: 15px;
      .left-middle-category {
        height: 30px;
        background: #eee;
        border-radius: 4px;
        text-align: left;
        vertical-align: middle;
        line-height: 30px;
        cursor: pointer;
        margin: 3px;
        display: flex;
        justify-content: flex-start;

        span {
          padding-left: 12px;
          flex: 1;
          font-size: 12px;
        }
      }
      .left-middle-category:hover {
        background: #b2bec3;
      }
    }
  }
  .left-tail {
    .left-tail-header {
      height: 32px;
      padding-left: 0;
      color: #333;
      letter-spacing: -0.08px;
      line-height: 18px;
      font-weight: 700;
      vertical-align: middle;
      display: table-cell;
      span {
        border-left: 3px solid #0984e3;
        margin-right: 15px;
      }
    }
    .left-tail-theme {
      border-bottom: 1px dashed #e4e4e4;
      height: 30px;
      line-height: 30px;
      .span1 {
        font-size: 16px;
        font-style: italic;
        color: #fe9250;
        vertical-align: middle;
        margin-left: 15px;
      }
      .span1-1 {
        font-size: 16px;
        font-style: italic;
        color: #000000;
        vertical-align: middle;
        margin-left: 15px;
      }
      .span2 {
        margin-left: 15px;
      }
      .span3 {
        float: right;
      }
    }

    .left-tail-theme:hover {
      cursor: pointer;
      background-color: #b2bec3;
    }

  }
}

.right {
  position: relative;
  padding: 15px !important;
  .right-search {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-end;
    .input {
      width: 60% !important;
      padding: 0 5px;
    }
    span:hover {
      cursor: pointer;
    }
  }
  .advanced-query {
    position: absolute;
    background: white;
    width: 100%;
    z-index: 1000;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    .advanced-query-form {
      padding: 15px;
      width: 100%;
    }
    .input-form {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      .input-form-label {
        width: 20%;
      }
      .input-form-input {
        width: 80%;
        height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 30px;
        .input-form-in {
          width: 30% !important;
        }

        span {
          padding: 0 5px;
          border-radius: 4px;
          margin-right: 10px;
        }
        span:hover {
          color: #2db7f5;
          cursor: pointer;
        }
        .spanbg {
          background: #2db7f5;
          color: white;
        }
        .spanbg:hover {
          background: #2db7f5;
          color: white;
        }
      }
    }
    .advanced-query-tail {
      padding: 15px;
      display: flex;
      border-top: 1px solid #e2e2e2;
      justify-content: center;
      line-height: 40px;
    }
  }
  .right-archives {
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 15px;
    .right-archives-header {
      background: #f9f9f9;
      padding: 0 13px;
      height: 40px;
      line-height: 40px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      span:hover {
        cursor: pointer;
      }
    }
    .right-archives-content {
      font-size: 12px;
      padding: 15px 25px;
      .right-archives-content-col {
        margin-right: 4%;
        padding: 10px;
        border-bottom: 1px solid #e4e4e4;
        p {
          margin: 0px;
          margin-bottom: 5px;
          opacity: 0.8;
          a {
            color: #4d7ad8;
            text-decoration: none;
            outline: none;
            cursor: pointer;
          }
        }
      }
      .right-archives-content-col:hover {
        background: #e9f7ff;
      }
      .right-archives-content-time {
        opacity: 0.5;
        color: #999;
        letter-spacing: -0.08px;
        line-height: 18px;
      }
    }
  }
  .right-tail {
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 15px;

    .right-tail-header {
      background: #f9f9f9;
      padding: 0 13px;
      height: 40px;
      line-height: 40px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
    }
    .right-tail-content {
      padding: 15px 25px;
      .right-tail-content-top {
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid #e2e2e2;
        span {
          padding: 0 15px 15px 15px;
          display: block;
        }
        span:hover {
          color: #2db7f5;
          cursor: pointer;
        }
      }

      .spanline {
        border-bottom: 2px solid #2db7f5;
        color: #2db7f5;
      }
      .right-tail-content-lists {
        display: flex;
        justify-content: flex-start;
        .right-tail-content-list {
          display: flex;
          justify-content: flex-start;
          padding: 15px;
          width: 100%;
          border-bottom: 1px dashed #e4e4e4;
          .listbtn {
            button {
              background: white;
              border: 1px solid #2db7f5;
              border-radius: 4px;
              padding: 5px 8px;
            }
            margin-right: 20px;
          }
          .right-tail-content-text {
            p {
              margin: 0px;
              margin-bottom: 5px;
              a {
                color: #4d7ad8;
                text-decoration: none;
                outline: none;
                cursor: pointer;
                font-weight: 700;
              }
            }
            .right-tail-content-text-time {
              opacity: 0.5;
            }
          }
        }
        .right-tail-content-list:hover {
          background: #e9f7ff;
        }
      }
    }
  }

}
</style>